<template>
  <div class="shopping">
    <div class="shopingHeader">
      <img src="./img/goback.png" />
      <p>购物车(5)</p>
    </div>
    <div class="shopingbox1">
      <div class="yuandian">
        <div @click="AllSelecte" :class="checlAllImg ? 'imgon' : 'imgno'"></div>
      </div>
      <div class="yuandianHeader">
        <span>皇宫婚纱旗舰店</span>
      </div>
      <div class="yuandianFoter">
        <img src="./img/quanicon.png" />
      </div>
    </div>
    <div class="shopLi">
      <div class="shoplist" v-for="(shopInfo, index) in products" :key="index">
        <div @click="handleSelect(shopInfo.productId, index, products)" :class="shopInfo.hasSelected ? 'shopListbtn1' : 'shopListbtn2'"></div>
        <div class="shopAll">
          <div class="shopImg">
            <img :src="shopInfo.shopImg" />
          </div>
        </div>
        <div class="shopAlt">
          <p class="p1">{{ shopInfo.shopName }}</p>
          <p class="p2">￥895</p>
        </div>
        <div class="shopColor">
          <p class="p3">颜色：{{ shopInfo.shopColor }}；尺码：{{ shopInfo.shopSize }}</p>
        </div>
        <div class="shopAdd">
          <div class="num1" @click="changeProductCount({ productId: shopInfo.productId, type: 'sub' })">-</div>
          <div class="num2">{{ shopInfo.count }}</div>
          <div class="num3" @click="changeProductCount({ productId: shopInfo.productId, type: 'add' })">+</div>
          <p class="p4">￥{{ shopInfo.pice }}</p>
        </div>
      </div>
    </div>
    <div class="shopFooter">
      <div class="shopFooterHead">
        <div class="shopFooterAdd">
          <div @click="AllSelecte" :class="checlAllFooterImg ? 'shopFooterImgon' : 'shopFooterImgno'"></div>
        </div>
        <div class="shopFooterFont">
          <p class="shopFooterFontP">合计：￥{{ account }}</p>
        </div>
        <div class="shopFooterHui">
          <p>为您节省￥605.2</p>
        </div>
        <div class="shopFooterSet">
          <p>结算({{ account }})</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import '../../service/index'
export default {
  data() {
    return {
      selectedCheckboxClass: 'shopListbtn2',
      selectedProductIds: new Set(),
      checlAllImg: false,
      checlAllFooterImg: false,
      account: 0,
    }
  },
  methods: {
    hasSelected(productId) {
      console.log(productId)
      return this.selectedProductIds.has(productId)
    },
    checlAll(productId) {
      return this.checlAllProductIds.has(productId)
    },
    handleSelect(productId, index) {
      let flag = this.hasSelected(productId)
      this.hasSelectedProduct({ hasSelected: !flag, index })
      if (flag) {
        this.selectedProductIds.delete(productId)
        this.checlAllImg = false
        this.checlAllFooterImg = false
      } else {
        this.selectedProductIds.add(productId)
        if (this.selectedProductIds.size === this.products.length) {
          this.checlAllImg = true
          this.checlAllFooterImg = true
        } else {
          this.checlAllImg = false
          this.checlAllFooterImg = false
        }
      }
      this.getCount()
    },
    AllSelecte() {
      if (this.selectedProductIds.size === this.products.length) {
        this.checlAllImg = false
        this.checlAllFooterImg = false
        this.checkAllSelectedProduct(false)
        for (let i = 0; i < this.products.length; i++) {
          this.selectedProductIds.delete(this.products[i].productId)
        }
      } else {
        this.checlAllImg = true
        this.checlAllFooterImg = true
        this.checkAllSelectedProduct(true)
        for (let i = 0; i < this.products.length; i++) {
          this.selectedProductIds.add(this.products[i].productId)
        }
      }
      this.getCount()
    },
    getCount() {
      let total = 0
      this.account = 0
      this.products.forEach(item => {
        if (item.hasSelected === true) {
          total = item.count * item.pice
          this.account += total
        }
      })
    },
    ...mapActions(['changeProductCount', 'hasSelectedProduct', 'checkAllSelectedProduct']),
  },
  computed: {
    ...mapState(['products']),
  },
  mounted() {
    this.$store.dispatch('getShopInfo')
  },
}
</script>

<style scoped lang="stylus">
.shopping {
  background: #F7F7F7;
  width: 100%;
  height: 800px;
  position: fixed;
  margin: 5px 0;
  overflow: hidden;

  .shopingHeader {
    width: 100%;
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 5px;
    background: #FFFFFF;

    img {
      width: 10px;
      height: 17px;
      margin: 15px 0 0 8px;
    }

    p {
      float: right;
      text-align: center;
      font-size: 18px;
      color: #333;
      margin-right: 160px;
    }
  }

  .shopingbox1 {
    width: 100%;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #eeeeee;
    padding: 12px 8px;
    margin-bottom: 10px;
    overflow: hidden;

    .yuandian {
      width: 20px;
      height: 20px;
      line-height: 20px;
      float: left;
      margin-right: 8px;
      overflow: hidden;

      .imgno {
        width: 20px;
        height: 20px;
        background-image: url('./img/checkno.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .imgon {
        width: 20px;
        height: 20px;
        background-image: url('./img/checkon.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }
    }

    .yuandianHeader {
      float: left;
      width: 60%;
      overflow: hidden;
      height: 20px;
      line-height: 20px;

      span {
        display: block;
        font-size: 14px;
        color: #FF2150;
        width: 100px;
        height: 20px;
        float: left;
        overflow: hidden;
      }

      img {
        float: right;
        width: 17px;
        height: 19px;
      }
    }

    .yuandianFoter {
      float: right;
      width: 29px;
      height: 18px;

      img {
        width: 29px;
        height: 18px;
      }
    }
  }

  .shopLi {
    width: 100%;
    padding: 0 8px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    overflow: hidden;

    .shoplist {
      width: 374px;
      height: 89px;
      line-height: 89px;
      border-bottom: 1px solid #eeeeee;
      padding: 8px 0;
      overflow: hidden;

      .shopListbtn1 {
        line-height: 20px;
        overflow: hidden;
        float: left;
        margin-top: 30px;
        width: 20px;
        height: 20px;
        background-image: url('./img/checkon.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .shopListbtn2 {
        line-height: 20px;
        overflow: hidden;
        float: left;
        margin-top: 30px;
        width: 20px;
        height: 20px;
        background-image: url('./img/checkno.png');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
      }

      .shopAll {
        float: left;
        overflow: hidden;
        width: 72px;
        height: 72px;
        margin: 0 5px;

        .shopImg {
          width: 72px;
          height: 72px;

          img {
            width: 72px;
            height: 72px;
          }
        }
      }

      .shopAlt {
        float: left;
        width: 266px;
        height: 16px;
        line-height: 16px;
        overflow: hidden;

        .p1 {
          float: left;
          color: #333;
          font-size: 13px;
          width: 70%;
          height: 16px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .p2 {
          width: 33px;
          height: 16px;
          float: right;
          color: #999999;
          text-decoration: line-through;
          font-size: 12px;
        }
      }

      .shopColor {
        float: right;
        width: 266px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        padding-top: 4px;

        .p3 {
          float: left;
          width: 70%;
          font-size: 13px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .shopAdd {
        width: 266px;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        float: right;
        margin-top: 11px;

        .num1, .num2, .num3 {
          float: left;
          width: 24px;
          height: 24px;
          line-height: 24px;
          background: #f7f7f7;
          color: #333333;
          font-size: 14px;
          text-align: center;
        }

        .num2 {
          float: left;
          width: 42px;
          height: 24px;
          margin: 0 3px 0 3px;
        }

        .num3 {
          float: left;
          width: 24px;
          height: 24px;
          color: #ff2150;
        }

        .p4 {
          font-size: 16px;
          color: #ff2150;
          float: right;
          overflow: hidden;
        }
      }
    }
  }

  .shopFooter {
    width: 100%;
    height: 46px;
    line-height: 46px;
    position: fixed;
    bottom: 40px;
    overflow: hidden;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;

    .shopFooterHead {
      width: 100%;
      height: 46px;
      line-height: 46px;
      bottom: 40px;
      left: 40px;
      overflow: hidden;

      .shopFooterAdd {
        width: 20px;
        height: 20px;
        line-height: 20px;
        float: left;
        margin: 12px;
        overflow: hidden;

        .shopFooterImgno {
          width: 20px;
          height: 20px;
          background-image: url('./img/checkno.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }

        .shopFooterImgon {
          width: 20px;
          height: 20px;
          background-image: url('./img/checkon.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
        }
      }

      .shopFooterFont {
        float: left;
        overflow: hidden;
        width: 105px;
        height: 46px;
        line-height: 46px;
        margin-right: 13px;

        .shopFooterFontP {
          width: 96px;
          height: 21px;
          color: #FF2150;
          font-size: 12px;
        }
      }

      .shopFooterHui {
        float: left;
        font-size: 12px;
        color: #999999;
      }

      .shopFooterSet {
        float: right;
        width: 90px;
        height: 46px;
        background: #FF2150;
        text-align: center;
        font-size: 14px;
        color: #ffffff;
      }
    }
  }
}
</style>
